package com.example.kotlin.jetpack_compose_by_tutorials

import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.stringResource
import com.example.myapplication.R
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.launch

/**
 *Create by Fanketly on 2022/9/16
 *Gitee:https://gitee.com/fanketly
 *desc:脚手架是 Jetpack Compose 引入的一种新布局。
 * 您可以使用它来实现遵循 Material Design 结构的可视化布局。
 * 它结合了几种不同的材料成分来构建一个完整的屏幕。
 */
@Composable
fun MyScaffold() {
    val scaffoldState: ScaffoldState = rememberScaffoldState()
//   使用rememberCoroutineScope()创建一个作用域。您需要使用协程来触发某些Scaffold() 行为，例如打开和关闭抽屉。
    val scope: CoroutineScope = rememberCoroutineScope()
    Scaffold(
        scaffoldState = scaffoldState,
        contentColor = colorResource(id = R.color.teal_200),
        content = { MyRow(Modifier.padding(it)) },
        topBar = {
            MyTopAppBar(
                scaffoldState = scaffoldState,
                scope = scope
            )
        },
        bottomBar = { MyBottomAppBar() },
        floatingActionButton = {},
        floatingActionButtonPosition = FabPosition.End,
        snackbarHost = { SnackbarHost(it) },
        drawerContent = { MyColumn() },
        drawerGesturesEnabled = true,
        drawerShape = MaterialTheme.shapes.large,
        drawerElevation = DrawerDefaults.Elevation,
        drawerBackgroundColor = MaterialTheme.colors.surface,
//    drawerContentColor = contentColorFor(drawerBackgroundColor),
        drawerScrimColor = DrawerDefaults.scrimColor,
        backgroundColor = MaterialTheme.colors.background,
    )
}

@Composable
fun MyBottomAppBar() {
    BottomAppBar(
        content = {},
        backgroundColor = colorResource(id = R.color.teal_200)
    )
}

@Composable
fun MyTopAppBar(scaffoldState: ScaffoldState, scope: CoroutineScope) {
    val drawerState = scaffoldState.drawerState
    TopAppBar(
        navigationIcon = {
            IconButton(
                content = {
                    Icon(
                        Icons.Default.Menu,
                        tint = Color.White,
                        contentDescription = "stringResource(R.string.menu)"
                    )
                },
                onClick = {
                    scope.launch {
                        if (drawerState.isClosed)
                            drawerState.open() else drawerState.close()
                    }
                }
            )
        },
        title = {
            Text(
                text = stringResource(
                    id =
                    R.string.app_name
                ), color = Color.White
            )
        },
        backgroundColor = colorResource(id = R.color.teal_200)
    )
}

